<template> 
  <a-row class="header-box">
    <a-page-header
      :title="$route.meta.title"
    >
    </a-page-header>
  </a-row>
  <a-divider :style="{marginTop:0}" />
  <a-alert
    message="说明："
    type="info"
    show-icon
  > 
    <template v-slot:icon><smile-outlined /></template>
    <template #description>
      <div>系统的基础配置。</div>
    </template>
  </a-alert>
  <a-button type="primary" @click="toResetPass" size="small" style="margin-top: 10px;">
    修改密码
  </a-button>
  <a-divider />
  <!-- 数据表格 -->
  <a-row class="form-box">
    <a-col :span="16">
      <a-form ref="form" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="系统版本">
          {{ form.version }}
        </a-form-item>
        <a-form-item label="目录映射" name="managePathHost">
          <!-- <a-input v-model:value="form.managePathHost" @blur="textTrim('managePathHost')" placeholder="宿主机中的实际目录"/> -->
          <a-input-group>
          <a-input addon-before="管理目录" v-model:value="form.managePath" placeholder="" disabled/>
          <a-input addon-before="实际目录" v-model:value="form.managePathHost" @blur="textTrim('managePathHost')" placeholder="">
            <template #suffix>
              <a-tooltip title="1.指定系统可以管理的目录；2.Docker运行本系统时无需配置。">
                <InfoCircleOutlined />
              </a-tooltip>
            </template>
          </a-input>
        </a-input-group>
        </a-form-item>
        <!-- <a-form-item label="媒体库基础目录" name="libraryPath">
          <a-input v-model:value="form.libraryPath" placeholder="" readonly>
            <template #suffix>
              <FolderOpenOutlined @click="folderSelectShow=true"/>
            </template>
          </a-input>
        </a-form-item> -->
      </a-form>
    </a-col>
    <a-col :span="16" align='center'>
      <a-space>
        <a-button @click="loadData">
          <template v-slot:icon><UndoOutlined/></template>
          重置
        </a-button>
        <a-button type="primary" @click="toSave">
          <template v-slot:icon><SaveFilled/></template>
          保存
        </a-button>
      </a-space>
    </a-col>
  </a-row>
  <AuthResetPasskey ref="resetModal" :success='resetOk'/>
  <!-- 路径选择 -->
  <!-- <a-modal v-model:visible="folderSelectShow" title="选择目录" @ok="getSelectedFolder">
    <FileSelector ref="refFileSelector"/>
  </a-modal> -->
</template>

<script>
import ConfigApi from '../../api/ConfigApi.js'
import { SmileOutlined, UndoOutlined, SaveFilled, FolderOpenOutlined, InfoCircleOutlined } from '@ant-design/icons-vue'
import AuthResetPasskey from '../Auth/ResetPasskey.vue'
import FileSelector from '../components/FileSelector.vue'
import { ref } from 'vue';
export default {
  name: 'config',
  components: {
    SmileOutlined,
    UndoOutlined,
    SaveFilled,
    AuthResetPasskey,
    FolderOpenOutlined,
    InfoCircleOutlined,
    FileSelector
  },
  setup() {
    const refFileSelector = ref()
    const folderSelected = () => {
      return refFileSelector.value.selectedKeys
    }
    return {
      refFileSelector, folderSelected
    }
  },
  data() {
    return {
      module: 'config',
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      dataLoading:false, form:{}, folderSelectShow: false,
      rules: {
        name: [
          { required: true, message: '请填写站点名称', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    textTrim(col) {
      this.form[col] = this.form[col] ? this.form[col].trim() : ''
      // console.log(`'${this.form[col]}'`)
    },
    getSelectedFolder() {
      this.form.libraryPath = this.folderSelected()[0]
      this.folderSelectShow = false
    },
    toSave() {
      ConfigApi.set(this.form).then(response=>{
        if (response.data.code === 1) {
          this.form = response.data.data
          this.$message.success("保存成功")
        } else {
          this.$message.error(`保存失败：${response.data.message}`)
        }
      }) 
    },
    loadData() {
      this.dataLoading = true
      ConfigApi.get().then(response=>{
        if (response.data.code === 1) {
          this.form = response.data.data
        } else {
          this.$message.error(`数据加载失败：${response.data.message}`)
        }
      }).catch((error)=>{
        this.$message.error(`数据加载失败：${error.message}`)
      }).then(()=>{
        this.dataLoading = false
      })
    },
    toResetPass() {
      this.$refs.resetModal.open()
    },
    resetOk() {

    }
  }
}
</script>